import React, { useState} from "react";
import { Modal, Input, message } from "antd";
import { useTranslation } from "react-i18next";
import { post_axios } from "../../utils";

export default function CheckIdentity(props) {
  const { t } = useTranslation();
  const { Search } = Input;
  const { email, checkIdentityShow, setCheckIdentityShow, login_success_func } =
    props;
  // 验证码
  const [check_identity_code, setCheck_identity_code] = useState("");

  const [confirmLoading, setConfirmLoading] = useState(false);
  //   发送验证码文本
  const [code_btn_word, setCode_btn_word] = useState(t("login.get_code"));
  // 发送验证码按钮禁用
  const [code_btn_dis, setCode_btn_dis] = useState(false);

  // 验证身份
  const check_identity_func = async () => {
    setConfirmLoading(true);
    if (check_identity_code === "") {
      message.warning({
        content: t("login.please_enter_code"),
      });
      return;
    }
    let upMsg = {
      verification_code: check_identity_code,
    };
    let res = await post_axios("confirmation.verification.code", "login", upMsg);
    setConfirmLoading(false);
    if (!res) return;
    login_success_func(res);
  };

  // 点击发送验证码
  const get_code_click = async () => {
    if (code_btn_dis) return;
    let upMsg = {};
    let res = await post_axios("send.verification.code", "email", upMsg);
    if (!res) return;
    message.success({
      content: t("login.send_success"),
    });

    let num = 60;
    setCode_btn_dis(true);
    const code_timer = setInterval(() => {
      if (num > 0) {
        setCode_btn_word(num);
        num--;
      } else {
        clearInterval(code_timer);
        setCode_btn_dis(false);
        setCode_btn_word(t("login.get_code"));
      }
    }, 1000);
  };
  return (
    <>
      <Modal
        title={t("login.check_identity")}
        open={checkIdentityShow}
        onOk={check_identity_func}
        confirmLoading={confirmLoading}
        onCancel={() => setCheckIdentityShow(false)}
        classNames={{ body: "edit_dialog_body" }}
        okText={t("common.confirm")}
        cancelText={t("common.cancel")}
        maskClosable={false}
      >
        <div className="dialog_ipt_box dialog_ipt_box_long normal_title">
          <div className="ipt_box_title">{t("login.email")}</div>
          <Input placeholder={t("login.enter_email")} disabled value={email} />
        </div>
        <div className="dialog_ipt_box dialog_ipt_box_long normal_title">
          <div className="ipt_box_title">{t("login.code")}</div>

          <Search
            value={check_identity_code}
            onChange={(e)=>setCheck_identity_code(e.target.value)}
            placeholder={t("login.enter_code")}
            allowClear
            enterButton={code_btn_word}
            onSearch={get_code_click}
            onPressEnter={get_code_click}
          />
        </div>
      </Modal>
    </>
  );
}
